<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>open book</title>
        <link rel="stylesheet" href="./demo1.css">
</head>

<body>
        <main class="main">
                <section class="card-area">

                        <!-- Card: City -->
                        <section class="card-section">
                                <div class="card">
                                        <div class="flip-card">
                                                <div class="flip-card__container active">
                                                        <div class="card-front">
                                                                <div class="card-front__tp card-front__tp--city">


                                                                        <h2 class="card-front__heading">
                                                                                City break
                                                                        </h2>
                                                                        <p class="card-front__text-price">
                                                                                From £29
                                                                        </p>
                                                                </div>

                                                                <div class="card-front__bt">
                                                                        <p
                                                                                class="card-front__text-view card-front__text-view--city">
                                                                                View me1
                                                                        </p>
                                                                </div>
                                                        </div>
                                                        <div class="card-back">
                                                                <video class="video__container" autoplay muted loop>
                                                                        <source class="video__media"
                                                                                src="https://player.vimeo.com/external/370331493.sd.mp4?s=e90dcaba73c19e0e36f03406b47bbd6992dd6c1c&profile_id=139&oauth2_token_id=57447761"
                                                                                type="video/mp4">
                                                                </video>
                                                        </div>
                                                </div>

                                                <div class="flip-card__container">
                                                        <div class="card-front">
                                                                <div class="card-front__tp card-front__tp--ski">

                                                                        <h2 class="card-front__heading">
                                                                                Ski trip
                                                                        </h2>
                                                                        <p class="card-front__text-price">
                                                                                From £199
                                                                        </p>
                                                                </div>

                                                                <div class="card-front__bt">
                                                                        <p
                                                                                class="card-front__text-view card-front__text-view--ski">
                                                                                View me2
                                                                        </p>
                                                                </div>
                                                        </div>

                                                        <div class="card-back">
                                                                <video class="video__container" autoplay muted loop>
                                                                        <source class="video__media"
                                                                                src="https://player.vimeo.com/external/195913085.sd.mp4?s=7c12f7a83de62a8900fd2ae049297070b9bc8a54&profile_id=164&oauth2_token_id=574477611"
                                                                                type="video/mp4">
                                                                </video>
                                                        </div>
                                                </div>
                                                <div class="flip-card__container">
                                                        <div class="card-front">
                                                                <div class="card-front__tp card-front__tp--beach">


                                                                        <h2 class="card-front__heading">
                                                                                Beach time
                                                                        </h2>
                                                                        <p class="card-front__text-price">
                                                                                From £229
                                                                        </p>
                                                                </div>

                                                                <div class="card-front__bt">
                                                                        <p
                                                                                class="card-front__text-view card-front__text-view--beach">
                                                                                View me3
                                                                        </p>
                                                                </div>
                                                        </div>
                                                        <div class="card-back">
                                                                <video class="video__container" autoplay muted loop>
                                                                        <source class="video__media"
                                                                                src="https://player.vimeo.com/external/332588783.sd.mp4?s=cab1817146dd72daa6346a1583cc1ec4d9e677c7&profile_id=139&oauth2_token_id=57447761"
                                                                                type="video/mp4">
                                                                </video>
                                                        </div>
                                                </div>
                                                <div class="flip-card__container">
                                                        <div class="card-front">
                                                                <div class="card-front__tp card-front__tp--camping">

                                                                        <h2 class="card-front__heading">
                                                                                Camping trek
                                                                        </h2>
                                                                        <p class="card-front__text-price">
                                                                                From £129
                                                                        </p>
                                                                </div>

                                                                <div class="card-front__bt">
                                                                        <p
                                                                                class="card-front__text-view card-front__text-view--camping">
                                                                                View me4
                                                                        </p>
                                                                </div>
                                                        </div>
                                                        <div class="card-back">
                                                                <video class="video__container" autoplay muted loop>
                                                                        <source class="video__media"
                                                                                src="https://player.vimeo.com/external/180185916.sd.mp4?s=c893e4770f87b00e0d6b5a1de138b01b02aaa085&profile_id=164&oauth2_token_id=57447761"
                                                                                type="video/mp4">
                                                                </video>
                                                        </div>
                                                </div>
                                        </div>

                                        <div class="inside-page">
                                                <div class="inside-page__container">
                                                        <h3 class="inside-page__heading inside-page__heading--city">
                                                                For urban lovers
                                                        </h3>
                                                        <p class="inside-page__text">
                                                                As cities never sleep, there are always something going
                                                                on, no matter what time!
                                                        </p>

                                                </div>
                                        </div>
                                </div>
                        </section>

                </section>
        </main>
        <script src='./demo1.js'> </script>
</body>

</html>